﻿@Scripts.Render("~/Scripts/DataMorph/datamorph-api.js")
@Scripts.Render("~/Scripts/DataMorph/datamorph-kobindings.js")
@Scripts.Render("~/Scripts/DataMorph/datamorph-storageaccount-viewmodel.js")
@Scripts.Render("~/Scripts/DataMorph/datamorph-generation-parameters-viewmodel.js")
@Scripts.Render("~/Scripts/DataMorph/datamorph-processingtimes-viewmodel.js")
@Scripts.Render("~/Scripts/DataMorph/datamorph-pageviewmodel.js")
<div id="wrapper" class="main-content">
    <div class="loadingImage" data-bind="visible: StorageAccounts.loading"></div>
    <div id="storageAccountsSection">
        <div class="section-title">
            <div id="storage-title">Storage Account</div>
            Key<a href="javascript:void(0)" id="add-storageaccount" data-bind="click: addAccount"><img src="~/images/add.png" alt="add" title="add storage account" class="add" /></a>
        </div>
        <div>
            <div class="loadingImage" data-bind="visible: StorageAccounts.loading"></div>
            <div data-bind="visible: StorageAccounts().length > 0">
                <ul id="storage-list" data-bind="foreach: StorageAccounts">
                    <li data-bind="click: $root.selectAccount, css: { 'active-row': $root.selectedAccount() === $data }">
                        <input class="name" data-bind="value: Name, uniqueName: true, enable: newRecord" />
                        <input class="storage-key" data-bind="value: Key, uniqueName: true, enable: newRecord" />
                    </li>
                </ul>
            </div>
        </div>
        <div id="dataSetsSection" data-bind="visible: selectedAccount() != null">
            <div class="section-title">
                DataSet
            
            </div>
            <div>
                <div class="loadingImage" data-bind="visible: DataSets.loading"></div>
                <table>
                    <thead>
                        <tr>
                            <th>Data Set</th>
                            <th>Tags</th>
                            <th>Files</th>
                            <th>Min Size</th>
                            <th>Max Size</th>
                            <th>Start Date</th>
                            <th>Days</th>
                            <th>
                                <a href="javascript:void(0)" id="add-dataSet" data-bind="click: addDataset">
                                    <img src="~/images/add.png" alt="add" title="add dataset" class="add" /></a></th>
                        </tr>
                    </thead>
                    <tbody data-bind="foreach: DataSets">
                        <tr data-bind="css: { 'active-row': $root.selectedDataset() === $data }">
                            <td>
                                <input class="name" data-bind="value: DataSetName, uniqueName: true, enable: newRecord" /></td>
                            <td>
                                <input class="small" type="number" data-bind="enable: newRecord, value: NumberOfTags" /></td>
                            <td>
                                <input class="small" type="number" data-bind="enable: newRecord, value: NumberOfFiles" /></td>
                            <td>
                                <input class="small" type="number" data-bind="enable: newRecord, value: MinFileSize" /></td>
                            <td>
                                <input class="small" type="number" data-bind="enable: newRecord, value: MaxFileSize" /></td>
                            <td>
                                <input type="date" data-bind="enable: newRecord, value: StartDate" style="width: 130px;" /></td>
                            <td>
                                <input class="small" type="number" data-bind="enable: newRecord, value: NumberOfDays" /></td>
                            <td>
                                <input id="process" type="button" value="Process" class="datamorph-button" data-bind="click: $root.processData, visible: existingRecord, disable: $root.ProcessingData" />
                                <input id="generate" type="button" value="Generate" class="datamorph-button" data-bind="click: $root.generateData, visible: newRecord, disable: $root.GeneratingData" /></td>
                            @*<td><pre data-bind="text: ko.toJSON($data, null, 2)"></pre></td>*@
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div>
            <div class="loadingImage" data-bind="visible: ProcessingTimes.loading"></div>
            <div id="processingTimes1" data-bind="visible: ProcessingTimes().length > 0">
                <table id="processingTimesTable">
                    <thead>
                        <tr data-bind="click: sortProcessedTimes">
                            <th id="DataSet">Dataset</th>
                            <th id="TimeRequested">Requested</th>
                            <th id="CompletedTime">Completed</th>
                            <th id="TotalProcessingTime">Total Processing</th>
                            <th id="AverageReadTime">Average Read</th>
                            <th id="MaxReadTime">Max Read</th>
                            <th id="MinReadTime">Min Read</th>
                            <th id="AverageParseTime">Average Parse</th>
                            <th id="MaxParseTime">Max Parse</th>
                            <th id="MinParseTime">Min Parse</th>
                            <th id="AverageWriteTime">Average Write</th>
                            <th id="MaxWriteTime">Max Write</th>
                            <th id="MinWriteTime">Min Write</th>
                            <th id="FilesRead">Files Read</th>
                            <th id="FilesWritten">Files Written</th>
                            <th id="InstanceCount">Instances</th>
                            <th id="CoreCount">Cores per Instance</th>
                            <th id="TotalCores">Total Cores</th>
                            <th id="BatchSize">Batch Size</th>
                        </tr>
                    </thead>
                    <tbody data-bind="foreach: ProcessingTimes">
                        <tr>
                            <td><span data-bind="text: DataSet"></span></td>
                            <td><span data-bind="text: TimeRequested"></span></td>
                            <td><span data-bind="text: CompletedTime"></span></td>
                            <td><span data-bind="text: TotalProcessingTime"></span></td>
                            <td><span data-bind="text: AverageReadTime"></span></td>
                            <td><span data-bind="text: MaxReadTime"></span></td>
                            <td><span data-bind="text: MinReadTime"></span></td>
                            <td><span data-bind="text: AverageParseTime"></span></td>
                            <td><span data-bind="text: MaxParseTime"></span></td>
                            <td><span data-bind="text: MinParseTime"></span></td>
                            <td><span data-bind="text: AverageWriteTime"></span></td>
                            <td><span data-bind="text: MaxWriteTime"></span></td>
                            <td><span data-bind="text: MinWriteTime"></span></td>
                            <td><span data-bind="text: FilesRead"></span></td>
                            <td><span data-bind="text: FilesWritten"></span></td>
                            <td><span data-bind="text: InstanceCount"></span></td>
                            <td><span data-bind="text: CoreCount"></span></td>
                            <td><span data-bind="text: TotalCores"></span></td>
                            <td><span data-bind="text: BatchSize"></span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        @*When enabled, this should cover the whole page*@
        <div id="fade" data-bind="visible: GeneratingData() || ProcessingData()"></div>
        <div id="progressDisplay" data-bind="visible: GeneratingData() || ProcessingData()">
            <div class="progressContainer">
                <h2>Working...</h2>
                <div id="progressBar" data-bind="progressBind: ProgressValue"></div>
                <div id="progressMessage" data-bind="text: ProgressMessage"></div>
            </div>
        </div>
    </div>

@Scripts.Render("~/Scripts/DataMorph/datamorph-bootstrap.js")